<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn>
  </cpn>
  <!-- 这个显示需要显示 以 -分割就行，需要获得子组件的数据来显示 -->
  <cpn>
    <!-- 父组件需要通过v-slot 得到子组件slot 绑定的 data属性数据 slotProps这个是个json对象，名字可以自己定义  -->
    <template v-slot="slotProps">
      {{slotProps.data.join(' - ')}}
    </template>
  </cpn>
</div>
<!-- 子组件上 slot 默认的显示是 ul-li 展示的内容 -->
<template id="cpn">
  <div>
   <slot :data="pLanguages">
     <ul>
       <li v-for="item in pLanguages">{{item}}</li>
     </ul>
   </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  /**
   * 具名插槽，多个插槽根据插槽定的name替换内容
   */
  const app=new Vue({
    el: '#app',
    data: {
      message:'你好vue',
    },
    components:{
      cpn:{
        template: '#cpn',
        data(){
          return {
            pLanguages: ['java','javascript','python','c++','c','c#','go']
          }
        }
      }
    }
  })
</script>
</body>
</html>